<template>
  <div
    class="intelligent-search custom-el-plus"
    v-loading="loadingStatus"
    element-loading-background="rgba(0,0,0,0.5)">
    <div
      class="search-wrapper"
      v-if="!mapVisible">
      <el-form
        ref="ruleFormRef"
        :model="queryForm"
        :rules="queryRules"
        inline>
        <el-form-item
          label="AI智能搜索"
          prop="searchText">
          <el-autocomplete
            v-model="queryForm.searchText"
            placeholder="请输入文本或以图搜图"
            clearable
            fit-input-width
            maxlength="20"
            :debounce="500"
            :fetch-suggestions="getHistoryList"
            @keydown.enter="handleEnterKey"
            ref="autocompleteRef"
            popper-class="custom-query-select search-text"
            class="">
            <template #append>
              <el-button
                :icon="Picture"
                @click="handlePicSearch">
              </el-button>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item
          label="时间选择"
          prop="dateRange">
          <el-date-picker
            v-model="queryForm.dateRange"
            format="YYYY-MM-DD HH:mm"
            value-format="X"
            type="datetimerange"
            range-separator="-"
            :disabled-date="disabledDate"
            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
            start-placeholder="开始时段"
            end-placeholder="结束时段" />
        </el-form-item>
        <el-form-item
          label="相似度阈值选择"
          prop="threshold">
          <el-slider
            v-model="queryForm.threshold"
            :marks="thresholdMarks"
            :show-input="false"
            :min="1" />
        </el-form-item>
        <el-form-item
          label="结果聚合"
          prop="">
          <el-select
            v-model="queryForm.isPoly"
            popper-class="custom-query-select">
            <el-option
              v-for="item in isPolyList"
              :key="item"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="返回图片条数"
          prop="total">
          <!-- <el-input
            v-model="queryForm.total"
            style="width: calc(120 / 1920 * 100vw)" /> -->
          <el-select
            v-model="queryForm.total"
            popper-class="custom-query-select">
            <el-option
              v-for="item in imgNumList"
              :key="item"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="deivce-icon">
        <span style="margin-right: 16px">设备选择</span>
        <el-icon
          color="#93B2F8"
          @click="selectDevice"
          ><LocationFilled
        /></el-icon>
      </div>
      <el-button
        style="margin-left: auto"
        type="primary"
        @click="submitForm(ruleFormRef, 1)"
        :disabled="loadingStatus"
        >搜索</el-button
      >
    </div>
    <div
      class="top-bar"
      v-if="!mapVisible && resultList.length">
      <div class="left-wrapper">
        <el-checkbox
          v-model="isSelectAll"
          :indeterminate="isIndeterminate"
          @change="selectAllPic"
          label="全选" />
        <el-button
          plain
          @click="viewMapDistribution"
          >查看地图分布</el-button
        >
      </div>
      <div class="right-wrapper">在{{ imgLibraryNum }}图片库中检索到{{ numOfSearches }}条结果，基于筛选条件展示{{ numOfShow }}条，用时{{ (searchUsedTime / 1000).toFixed(3) }}秒</div>
    </div>
    <div
      v-if="!mapVisible"
      class="content-wrapper"
      :style="{ backgroundColor: resultList.length ? 'transparent' : '#0d172f', height: resultList.length ? 'calc(100% - 252 / 1080*100vh)' : 'calc(100% - 138 / 1080*100vh)' }">
      <div
        class="img-box"
        v-if="resultList.length && lastImgData">
        <div class="img-wrapper">
          <img
            :src="searchedImgSrc"
            alt="" />
        </div>
      </div>
      <div
        class="card-wrapper"
        ref="contentRef"
        v-if="resultList.length">
        <div
          class="card-item-wrapper"
          v-for="(item, index) in resultList"
          :key="item.esId">
          <CardItem
            :polyFlag="polyFlag"
            :allSelectedFlag="isSelectAll"
            @selectPicItem="selectPicItem"
            :cardInfo="item"
            :searchPkId="searchPkId" />
        </div>
      </div>
      <div
        class="default-img"
        v-if="!resultList.length">
        <div>
          <img
            :src="defaultImg"
            alt="" />
        </div>
        <div>暂无内容，请点击搜索框进行搜索</div>
      </div>
    </div>

    <div
      class="list-bottom"
      v-if="resultList.length && !mapVisible">
      <el-pagination
        :currentPage="pageNum"
        :page-size="pageSize"
        popper-class="custom-query-select"
        :background="true"
        :page-sizes="[10, 50, 100]"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <div
      v-if="mapVisible"
      style="height: 100%">
      <DeviceMap
        :mapVisible="mapVisible"
        :deviceMapData="selectPicItemsList"
        :searchPkId="searchPkId"
        @changeMapVisible="changeMapVisible"></DeviceMap>
    </div>
    <!-- 图片上传 -->
    <el-dialog
      v-model="uploadDialogVisible"
      @close="imgFileList = []"
      width="auto"
      destroy-on-close
      align-center
      title="以图搜图">
      <div class="pic-dialog">
        <div class="img-content">
          <div>上传图片</div>
          <div
            @drop.prevent="handleDrop"
            @dragenter="handleDragEnter"
            @dragleave="handleDropLeave">
            <el-upload
              ref="uploadRef"
              class="upload"
              drag
              :file-list="imgFileList"
              :show-progress="false"
              :accept="uploadAcceptType"
              :auto-upload="false"
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleSuccess"
              :on-error="handleError"
              :on-change="handlePicChange"
              :http-request="uploadPicFile">
              <el-icon
                v-show="!isDragOver"
                :size="20"
                ><Folder color="#409EFF"
              /></el-icon>
              <div
                v-show="!isDragOver"
                class="el-upload__text">
                单击或拖拽文件到此区域进行上传
              </div>
              <div
                v-show="isDragOver"
                class="el-upload__text">
                释放鼠标
              </div>
            </el-upload>
          </div>
          <div class="btn-group">
            <el-button @click="cancelUpload">取消</el-button>
            <el-button
              type="primary"
              :disabled="upLoadingStatus"
              @click="submitUpload"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 设备选择 -->
    <div v-if="deviceDialogVisible">
      <SelectDeviceDialog
        :visible="deviceDialogVisible"
        :selectedDevices="queryForm.deviceIds"
        @handleDeviceDialogClose="handleDeviceDialogClose"
        @getDeviceIds="getDeviceIds"></SelectDeviceDialog>
    </div>
  </div>
</template>

<script setup>
  import { getCurrentInstance, ref, reactive, onMounted, watch, nextTick } from 'vue'
  import { Picture, Folder, LocationFilled, ArrowLeft } from '@element-plus/icons-vue'
  import { genFileId } from 'element-plus'
  import CardItem from './components/cardItem.vue'
  import DeviceMap from './components/deviceMap.vue'
  import SelectDeviceDialog from './components/selectDevice.vue'
  import { deepClone } from '@/utils/toolUtils'
  import tipMessage from '@/utils/tipMessage'
  import defaultImg from '@/assets/img/page/defaultImg.png'

  const { proxy } = getCurrentInstance()
  const ruleFormRef = ref(null)
  const autocompleteRef = ref(null)
  const contentRef = ref(null)
  const uploadAcceptType = 'image/jpeg,image/png,image/bmp,image/x-icon,image/jpg,image/webP'
  const pageNum = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const queryForm = reactive({
    searchText: '',
    dateRange: [`${((Date.now() - 7 * 60 * 60 * 24 * 1000) / 1000).toFixed(0)}`, `${(Date.now() / 1000).toFixed(0)}`],
    threshold: 40,
    total: 100,
    isPoly: 0,
    deviceIds: []
  })
  const isPolyList = ref([
    { label: '不聚合', value: 0 },
    { label: '只按设备聚合', value: -1 },
    { label: '按设备聚合后每1分钟分组', value: 1 },
    { label: '按设备聚合后每5分钟分组', value: 5 },
    { label: '按设备聚合后每10分钟分组', value: 10 },
    { label: '按设备聚合后每15分钟分组', value: 15 },
    { label: '按设备聚合后每20分钟分组', value: 20 },
    { label: '按设备聚合后每30分钟分组', value: 30 },
    { label: '按设备聚合后每1小时分组', value: 60 },
    { label: '按设备聚合后每12小时分组', value: 720 },
    { label: '按设备聚合后每24小时分组', value: 1440 }
  ])
  const imgNumList = ref([
    { label: '100', value: 100 },
    { label: '500', value: 500 },
    { label: '1000', value: 1000 },
    { label: '2000', value: 2000 },
    { label: '3000', value: 3000 }
  ])
  const mapVisible = ref(false)
  const queryRules = reactive({
    searchText: [{ required: true, message: '请输入文本或以图搜图', trigger: ['blur', 'change'] }],
    dateRange: [{ required: true, message: '请选择时间', trigger: ['blur', 'change'] }]
  })
  const resultList = ref([])
  const loadingStatus = ref(false)
  const upLoadingStatus = ref(false)
  const uploadDialogVisible = ref(false)
  const deviceDialogVisible = ref(false)
  const uploadRef = ref(null)
  let lastImgData = null
  const imgFileList = ref([])
  const feedbackVector = ref('')
  const searchPkId = ref('')
  const isSelectAll = ref(false)
  const imgLibraryNum = ref(0)
  const numOfSearches = ref(0)
  const numOfShow = ref(0)
  const searchUsedTime = ref(0)
  const selectPicItemsList = ref([])
  const searchedImgSrc = ref('')
  const polyFlag = ref(false)
  const maxlengthOfAllSelect = ref(0)
  const isIndeterminate = ref(false)
  const thresholdMarks = reactive({
    1: '1',
    100: '100'
  })
  const isDragOver = ref(false)
  const dragCounter = ref(0)
  /* =========方法========= */
  const disabledDate = time => {
    let max = Date.now()
    return time.getTime() >= max
  }
  const handleEnterKey = event => {
    if (event.keyCode === 13) {
      submitForm(ruleFormRef.value)
      autocompleteRef.value.blur()
    }
  }
  const getHistoryList = async (queryString, cb) => {
    try {
      const res = await proxy.$http.getWithUrl('analysis/searchHistory', {
        searchText: queryString
      })
      let data = res.list.map(item => ({ ...item, value: item.textSearch }))
      cb(data)
    } catch (error) {
      console.log(error)
      cb([])
    }
  }
  const getQueryParams = (isSelectAll = false) => {
    const params = {
      pageNum: isSelectAll ? 1 : pageNum.value,
      pageSize: isSelectAll ? queryForm.total : pageSize.value,
      ...queryForm,
      startDate: +(queryForm.dateRange ? queryForm.dateRange[0] + '000' : ''),
      endDate: +(queryForm.dateRange ? queryForm.dateRange[1] + '000' : '')
    }
    if (queryForm.isPoly === -1) {
      params.polyDimension = 0
      params.isPoly = 1
    } else if (queryForm.isPoly !== 0) {
      params.polyDimension = queryForm.isPoly
      params.isPoly = 1
    }
    delete params.dateRange
    return params
  }

  const handleQuery = async (scrollFlag, isPage = false) => {
    try {
      loadingStatus.value = true
      const params = getQueryParams()
      const res = await proxy.$http.postWithBody('analysis/textSearch', params)
      loadingStatus.value = false
      if (res.searchResult?.result?.length === 0 || res.searchResult?.resultPoly?.length === 0) {
        tipMessage('没有符合当前阈值条件的数据，请尝试调低阈值后重试！', 'warning', 3000)
      }
      polyFlag.value = res.isPoly
      total.value = +res.searchResult.totalNum
      pageNum.value = +res.searchResult.pageNum
      resultList.value = res.isPoly ? res.searchResult.resultPoly : res.searchResult.result
      imgLibraryNum.value = +res.total
      numOfSearches.value = +res.matchNum
      numOfShow.value = +res.resNum
      searchUsedTime.value = res.searchUsedTime
      searchPkId.value = res.searchPkId
      maxlengthOfAllSelect.value = +res.searchResult.totalNum
      if (!isPage) {
        selectPicItemsList.value = []
        isSelectAll.value = false
      }
      if (scrollFlag) {
        contentRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
      }
    } catch (error) {
      console.log(error)
      resultList.value = []
      selectPicItemsList.value = []
      isSelectAll.value = false
      loadingStatus.value = false
    }
  }
  const submitForm = (formEl, pageNumber = pageNum.value, scrollFlag = true, isPage = false) => {
    if (!formEl) return
    if (queryForm.searchText) {
      lastImgData = null
      queryRules.searchText[0].required = true
    } else if (lastImgData) {
      queryRules.searchText[0].required = false
    }
    formEl.validate(valid => {
      if (valid) {
        pageNum.value = pageNumber
        if (lastImgData) {
          searchPicHttp(scrollFlag, isPage)
        } else {
          handleQuery(scrollFlag, isPage)
        }
      } else {
        console.log('error submit!')
        return false
      }
    })
  }
  const getPicFormData = (imgBlob, isSelectAll = false) => {
    const formData = new FormData()
    formData.append('searchImageFile', imgBlob)
    formData.append('threshold', queryForm.threshold)
    formData.append('total', +queryForm.total)
    formData.append('startDate', +(queryForm.dateRange ? queryForm.dateRange[0] + '000' : ''))
    formData.append('endDate', +(queryForm.dateRange ? queryForm.dateRange[1] + '000' : ''))
    formData.append('deviceIds', queryForm.deviceIds)
    formData.append('isPoly', queryForm.isPoly === 0 ? 0 : 1)
    formData.append('polyDimension', queryForm.isPoly === -1 ? 0 : queryForm.isPoly !== 0 ? queryForm.isPoly : '')
    formData.append('pageNum', isSelectAll ? 1 : +pageNum.value)
    formData.append('pageSize', isSelectAll ? queryForm.total : pageSize.value)
    return formData
  }
  const searchPicHttp = async (scrollFlag, isPage = false) => {
    try {
      loadingStatus.value = true
      const formData = getPicFormData(lastImgData)
      const res = await proxy.$http.postWithBody('analysis/imageSearch', formData)
      if (res.searchResult?.result?.length === 0 || res.searchResult?.resultPoly?.length === 0) {
        tipMessage('没有符合当前阈值条件的数据，请尝试调低阈值后重试！', 'warning', 3000)
      }
      loadingStatus.value = false
      polyFlag.value = res.isPoly
      total.value = +res.searchResult.totalNum
      pageNum.value = +res.searchResult.pageNum
      resultList.value = res.isPoly ? res.searchResult.resultPoly : res.searchResult.result
      imgLibraryNum.value = +res.total
      numOfSearches.value = +res.matchNum
      numOfShow.value = +res.resNum
      searchUsedTime.value = res.searchUsedTime
      searchPkId.value = res.searchPkId
      queryForm.searchText = ''
      if (!isPage) {
        selectPicItemsList.value = []
        isSelectAll.value = false
      }
      getImgSrc(lastImgData)
      maxlengthOfAllSelect.value = +res.searchResult.totalNum
      if (scrollFlag) {
        contentRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
      }
    } catch (error) {
      console.log(error)
      lastImgData = null
      queryRules.searchText[0].required = true
      resultList.value = []
      selectPicItemsList.value = []
      isSelectAll.value = false
      loadingStatus.value = false
    }
  }
  const handlePicSearch = async () => {
    uploadDialogVisible.value = true
  }
  const handleExceed = files => {
    if (files.length > 1) {
      tipMessage('图片数不可超过1个', 'warning')
    }
    const isImage = isFileImage(files[0])
    if (isImage) {
      uploadRef.value?.clearFiles()
      const file = files[0]
      file.uid = genFileId()
      uploadRef.value?.handleStart(file)
    } else {
      dragCounter.value = 0
      isDragOver.value = false
      tipMessage('仅支持图片类型文件', 'warning')
    }
  }
  const handleSuccess = (response, file, fileList) => {
    console.log('上传成功')
    uploadDialogVisible.value = false
  }
  const handleError = (err, file, fileList) => {
    tipMessage('上传失败！', 'warning')
    // uploadDialogVisible.value = false
  }
  const uploadPicFile = async ({ file }) => {
    try {
      queryRules.searchText[0].required = false
      if (file.size !== lastImgData?.size || file.name !== lastImgData?.name || file.lastModified !== lastImgData?.lastModified) {
        console.log('图片改了')
      }
      pageNum.value = 1
      const formData = getPicFormData(file)
      upLoadingStatus.value = true
      const res = await proxy.$http.postWithBody('analysis/imageSearch', formData)
      loadingStatus.value = false
      upLoadingStatus.value = false
      uploadDialogVisible.value = false
      lastImgData = file
      imgFileList.value = []
      if (res.searchResult?.result?.length === 0 || res.searchResult?.resultPoly?.length === 0) {
        tipMessage('暂无数据!', 'warning')
      }
      polyFlag.value = res.isPoly
      total.value = +res.searchResult.totalNum
      pageNum.value = +res.searchResult.pageNum
      resultList.value = res.isPoly ? res.searchResult.resultPoly : res.searchResult.result
      imgLibraryNum.value = +res.total
      numOfSearches.value = +res.matchNum
      numOfShow.value = +res.resNum
      searchUsedTime.value = res.searchUsedTime
      searchPkId.value = res.searchPkId
      queryForm.searchText = ''
      selectPicItemsList.value = []
      isSelectAll.value = false
      isIndeterminate.value = false
      getImgSrc(lastImgData)
      maxlengthOfAllSelect.value = +res.searchResult.totalNum
      contentRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
    } catch (error) {
      console.log(error)
      upLoadingStatus.value = false
      imgFileList.value = []
      searchedImgSrc.value = ''
      resultList.value = []
      selectPicItemsList.value = []
      isSelectAll.value = false
      loadingStatus.value = false
    }
  }
  const getImgSrc = blob => {
    const reader = new FileReader()
    reader.readAsDataURL(blob)
    reader.onload = e => {
      searchedImgSrc.value = e.target.result
    }
  }
  const isFileImage = file => {
    const fileExtension = file.name.split('.').pop().toLowerCase()
    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
    return imageExtensions.includes(fileExtension)
  }
  const handlePicChange = (file, fileList) => {
    if (file.status === 'ready') {
      const isImage = isFileImage(file.raw)
      if (isImage) {
        imgFileList.value = fileList
        console.log('更改后的文件', file)
      } else {
        uploadRef.value?.clearFiles()
        tipMessage('仅支持图片类型文件', 'warning')
      }
      dragCounter.value = 0
      isDragOver.value = false
    } else if (file.status === 'success' || file.status === 'file') {
    }
  }
  const handleDragEnter = e => {
    dragCounter.value++
    if (dragCounter.value === 1) {
      isDragOver.value = true
      console.log('enter')
    }
  }
  const handleDropLeave = e => {
    dragCounter.value--
    if (dragCounter.value === 0) {
      isDragOver.value = false
      console.log('leave')
    }
  }
  const handleDrop = e => {
    dragCounter.value = 0
    isDragOver.value = false
    console.log('jieshu', e)
  }
  const handleSizeChange = val => {
    pageSize.value = val
    pageNum.value = 1
    submitForm(ruleFormRef.value, undefined, undefined, true)
  }
  const handleCurrentChange = val => {
    pageNum.value = val
    submitForm(ruleFormRef.value, undefined, undefined, true)
  }
  const submitUpload = () => {
    if (!imgFileList.value.length) {
      tipMessage('请上传图片！', 'warning')
    }
    uploadRef.value?.submit()
  }
  const cancelUpload = () => {
    uploadDialogVisible.value = false
    imgFileList.value = []
  }
  const selectDevice = () => {
    deviceDialogVisible.value = true
  }
  const handleDeviceDialogClose = visible => {
    deviceDialogVisible.value = visible
  }
  const getDeviceIds = ids => {
    queryForm.deviceIds = ids
  }
  const changeMapVisible = visible => {
    mapVisible.value = visible
  }
  const viewMapDistribution = () => {
    if (!selectPicItemsList.value.length) {
      tipMessage('请选择图片！', 'warning')
      return
    }
    mapVisible.value = true
  }
  const selectAllPic = async val => {
    isIndeterminate.value = false
    if (val) {
      loadingStatus.value = true
      let res = null
      if (lastImgData) {
        const formData = getPicFormData(lastImgData, true)
        res = await proxy.$http.postWithBody('analysis/imageSearch', formData)
      } else {
        const params = getQueryParams(true)
        res = await proxy.$http.postWithBody('analysis/textSearch', params)
      }

      loadingStatus.value = false
      polyFlag.value = res.isPoly
      selectPicItemsList.value = res.isPoly ? res.searchResult.resultPoly : res.searchResult.result
      maxlengthOfAllSelect.value = +res.searchResult.totalNum
    } else {
      selectPicItemsList.value = []
      // maxlengthOfAllSelect.value = 0
    }
  }
  const selectPicItem = (isSelected, cardInfo) => {
    if (isSelected) {
      selectPicItemsList.value.push(cardInfo)
    } else {
      if (polyFlag.value) {
        selectPicItemsList.value = selectPicItemsList.value.filter(item => cardInfo.result[0].id !== item.result[0].id)
      } else {
        selectPicItemsList.value = selectPicItemsList.value.filter(item => cardInfo.id !== item.id)
      }
    }
    if (selectPicItemsList.value.length === maxlengthOfAllSelect.value) {
      isSelectAll.value = true
      isIndeterminate.value = false
    } else if (selectPicItemsList.value.length > 0) {
      isIndeterminate.value = true
    } else {
      isIndeterminate.value = false
      isSelectAll.value = false
    }
  }
  onMounted(() => {})
</script>

<style scoped lang="scss">
  .intelligent-search {
    background: #000102;
    padding: 0 pxTvw(24) pxTvh(24);
    & > .search-wrapper {
      @include computed_font(14);
      color: #bed3e6;
      display: flex;
      align-items: center;
      padding: 0 pxTvw(16);
      box-sizing: border-box;
      height: pxTvh(88);
      margin: pxTvh(24) 0 pxTvh(16) 0;
      background: #0d172f;
      border-radius: 4px 4px 4px 4px;
      :deep(.el-slider) {
        width: pxTvw(100);
        margin: 0 pxTvw(20);
        .el-slider__runway {
          color: rgb(29, 67, 132);
        }
        .el-slider__marks-stop {
          display: none;
        }
        .el-slider__marks {
          .el-slider__marks-text {
            color: #bed3e6;
          }
          .el-slider__marks-text:first-child {
            left: -15% !important;
            margin-top: 0;
            top: -350%;
          }
          .el-slider__marks-text:last-child {
            left: 120% !important;
            margin-top: 0;
            top: -350%;
          }
        }
      }
      .deivce-icon {
        display: flex;
        align-items: center;
        .el-icon {
          cursor: pointer;
        }
      }
      :deep(.el-input-group__append) {
        padding-right: 12px;
        .el-icon {
          color: #93b2f8;
          margin-top: pxTvh(2);
        }
        .el-button {
          // padding-right: 12px;
        }
      }
    }
    & > .top-bar {
      @include computed_font(14);
      color: rgba(190, 211, 230, 0.8);
      height: pxTvh(40);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: pxTvh(16) 0;
      box-sizing: border-box;
      border-radius: 4px 4px 0px 0px;
      .left-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-button {
          margin-left: pxTvw(32);
        }
      }
    }
    & > .content-wrapper {
      display: flex;
      height: calc(100% - pxTvh(56+136));
      column-gap: pxTvw(20);
      background-color: #0d172f;
      & > .img-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: pxTvw(355);
        background: #0d172f;
        border-radius: 4px 4px 4px 4px;
        padding: 0 pxTvw(16);
        & > .img-wrapper {
          width: pxTvw(323);
          height: pxTvh(181);
          border-radius: 4px 4px 4px 4px;
          // border: 1px solid #377dff;
          & > img {
            width: 100%;
            height: 100%;
          }
        }
      }
      & > .card-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        column-gap: pxTvw(20);
        row-gap: pxTvh(20);
        & > .card-item-wrapper {
          // flex: 1;
          // display: flex;
          // flex-basis: calc(100% / 5);
          width: pxTvw(355);
        }
      }

      & > .default-img {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        color: rgba(98, 120, 164, 1);
        & > div:first-child {
          margin-bottom: pxTvh(24);
        }
      }
    }
    & > .list-bottom {
      height: pxTvh(32);
      margin-top: pxTvh(24);
    }
    .pic-dialog {
      width: pxTvw(400);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .img-content {
        width: pxTvw(400);
        // height: pxTvh(360);
        // background-color: rgba(255, 255, 255, 0.2);
        margin-top: pxTvh(16);
        padding: 0 pxTvh(16);
        color: rgba(207, 219, 252, 0.8);
        box-sizing: border-box;
        & > div:first-child {
          margin-bottom: pxTvh(16);
        }
        & .upload {
          height: pxTvh(168);
          .el-progress-bar__inner {
            background-color: #ff9900; /* 设置上传进度条的背景颜色 */
          }
        }
        & > .btn-group {
          margin-top: pxTvh(32);
          display: flex;
          justify-content: end;
        }
      }

      :deep(.el-upload-list__item-name) {
        color: #cfdbfc;
        .el-icon:first-child {
          display: none;
        }
      }
    }
  }
</style>

<style lang="scss">
  .search-text {
    margin-top: pxTvh(-11);
    .el-autocomplete__popper {
      .el-popper__arrow {
        display: none;
      }
    }
    &.el-popper {
      border-radius: none;
    }
  }
</style>
